<template>
    <div class="m-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <strong>菜单管理</strong>
            </el-breadcrumb-item>
            <el-breadcrumb-item>菜单分配</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main">
            <el-tabs v-model="activeTabName" class="demo-tabs" @tab-click="selectTabs">
                <el-tab-pane label="分配角色" name="role">
                    <DistributionRole/>
                </el-tab-pane>
                <el-tab-pane label="分配菜单" name="menu">
                    <DistributionMenu :isMenu="isMenu"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import DistributionRole from '@/components/sonComponent/DistributionRole.vue'
import DistributionMenu from '@/components/sonComponent/DistributionMenu.vue'
import { ref } from 'vue'
const activeTabName=ref('role')
const isRole = ref(true)
const isMenu = ref(false)
const selectTabs = (tab, event)=>{
    activeTabName.value = tab.props.name
    if(activeTabName.value === 'role'){
        isRole.value = true
        isMenu.value = false
    }else if(activeTabName.value === 'menu'){
        isRole.value = false
        isMenu.value = true
    }
}

</script>

<style lang="less" scoped>
.m-box{
    width: 100%;
    height: 100%;
    .main{
        width: 100%;
        height: 90%;
        margin-top: 20px;
        .demo-tabs{
            width: 100%;
            height: 100%;
        }
    }
}
</style>